<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>统计信息</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片试图区-->
    <el-card>
      <el-row>
        <el-col :span="4">
          <el-button type="primary" :disabled="show" @click="createDiagram">展示</el-button>
        </el-col>
      </el-row>
      <div id="main" ref="main" style="width: 1200px; height:500px;"></div>
    </el-card>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data () {
    return {
      show: false,
      queryinfo: {page: 1, size: 30, query: '', album: 0},
      myChart: null,
      xdata: [],
      ydata1: [],
      ydata2: [],
      opction: {
        title: {
          text: '歌曲统计图'
        },
        legend: {
          data: ['热度', '评分']
        },
        toolbox: {
          // y: 'bottom',
          feature: {
            magicType: {
              type: ['stack', 'tiled']
            },
            dataView: {},
            saveAsImage: {
              pixelRatio: 2
            }
          }
        },
        tooltip: {},
        xAxis: {
          name: '歌曲名称',
          type: 'category',
          splitLine: {
            show: false
          },
          data: []
        },
        yAxis: {},
        series: [{
          name: '热度',
          data: [],
          type: 'bar',
          symbolSize: 8,
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#409EFF'
              }
            }
          }
        }, {
          name: '评分',
          data: [],
          type: 'bar',
          symbolSize: 8,
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#409EFF'
              }
            }
          }
        }]
      }
    }
  },
  methods: {
    // 查询歌曲
    getSong () {
      this.$http.get(`song/${this.queryinfo.page}/${this.queryinfo.size}`, {
        'album': this.queryinfo.album,
        'query': this.queryinfo.query
      }).then(res => {
        const songs = res.data.data.rows
        songs.forEach(item => {
          this.xdata.push(item.name + '')
          this.ydata1.push(item.hot + '')
          this.ydata2.push(item.grade + '')
        })
      })
    },
    // 绘制统计图
    createDiagram () {
      this.show = true
      this.myChart = echarts.init(this.$refs.main)
      const temp = this.opction
      temp.xAxis.data = this.xdata
      temp.series[0].data = this.ydata1
      temp.series[1].data = this.ydata2
      this.myChart.setOption(this.opction)
    }
  },
  created () {
    this.getSong()
  }
}
</script>

<style scoped>

</style>
